<template>
  <div id="app">
    <div class="medical-container">
      <div class="header">
        <h1>安吉中医院机械通气表</h1>
        <div v-if="showPreview" class="preview-modal" @click="showPreview = false">
          <img src="@/assets/anji.png" class="preview-image" />
        </div>
        <img src="@/assets/anji.png" @click="openPreview" alt="" class="btn-icon" />
      </div>

      <table class="medical-table">
        <thead>
          <!-- 第一行表头 -->
          <tr>
            <!-- <th colspan="2">2025</th> -->
            <th rowspan="3">日期</th>
            <th rowspan="3">时间</th>

            <th rowspan="3">呼吸衰竭原因</th>
            <th colspan="12">ABG</th>
            <th rowspan="3">签名</th>
          </tr>

          <!-- 第二行表头  -->
          <tr>
            <!-- <th rowspan="2">日期</th>
            <th rowspan="2">时间</th> -->
            <th rowspan="2">通气模式</th>
            <th rowspan="2">镇静镇痛</th>
            <th colspan="5">撒机评估</th>
            <th rowspan="2">人工气道</th>
            <th rowspan="2">气道管理</th>
            <th colspan="2">呼吸支持策略</th>
            <th rowspan="2">VAP防控</th>
          </tr>

          <!-- 第三行表头 - -->
          <tr>
            <th>评估选项</th>
            <th>方法</th>
            <th>时间</th>
            <th>频率</th>
            <th>失败原因</th>
            <th>小潮气量通气</th>
            <th>项目</th>
          </tr>
        </thead>

        <tbody>
          <tr v-if="loading">
            <td colspan="15" class="loading">正在加载医疗数据...</td>
          </tr>

          <!-- 数据行  -->
          <tr v-for="(record, index) in medicalRecords" :key="index">
            <td style="min-width: 60px">{{ record.date }}</td>
            <td>{{ record.time }}</td>
            <td>{{ record.reason }}</td>
            <td>{{ record.mode }}</td>
            <td>{{ record.sedation }}</td>
            <td>{{ record.assessment }}</td>
            <td>{{ record.method }}</td>
            <td>{{ record.assessmentTime }}</td>
            <td>{{ record.frequency }}</td>
            <td>{{ record.failureReason }}</td>
            <td>{{ record.airway }}</td>
            <td>{{ record.management }}</td>
            <td>{{ record.tidalVolume }}</td>
            <td>{{ record.project }}</td>
            <td>{{ record.fk }}</td>
            <td>{{ record.signature }}</td>
          </tr>
        </tbody>
      </table>

      <div class="print-actions">
        <button class="print-btn" @click="printTable">打印医疗记录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'DemoTemplate',
  components: {},
  setup() {
    const state = reactive({
      showPreview: false,

      medicalRecords: [
        {
          date: '07-01',
          time: '16:00',
          reason: '气管切开',
          mode: '有创',
          sedation: '镇静',
          assessment: 'SBT',
          method: '',
          assessmentTime: '',
          frequency: '',
          failureReason: '',
          airway: '气管切开',
          management: '湿化方法',
          tidalVolume: '6~8',
          project: '',
          fk: '洗手',
          signature: '梁仁文',
        },
        {
          date: '07-02',
          time: '02:00',
          reason: '气管切开',
          mode: '有创',
          sedation: '镇静',
          assessment: 'SBT',
          method: '',
          assessmentTime: '',
          frequency: '',
          failureReason: '',
          airway: '气管切开',
          management: '湿化方法',
          tidalVolume: '6~8',
          project: '',
          signature: '何梦琦',
        },
        {
          date: '07-02',
          time: '08:00',
          reason: '气管切开',
          mode: '有创',
          sedation: '镇静',
          assessment: 'SBT',
          method: '',
          assessmentTime: '',
          frequency: '',
          failureReason: '',
          airway: '气管切开',
          management: '湿化方法',
          tidalVolume: '6~8',
          project: '',
          signature: '张娟',
        },
      ],
    })
    const printTable = () => {
      window.print()
    }
    const openPreview = () => {
      state.showPreview = true
    }
    return {
      ...toRefs(state),
      printTable,
      openPreview,
    }
  },
})
</script>

<style scoped>
.btn-icon {
  margin-right: 5px;
  width: 30px;
  vertical-align: sub;
  cursor: pointer;
  margin-left: 16px;
  vertical-align: middle;
  text-align: center;
}
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.preview-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  padding: 20px;
  background-color: #f5f7fa;
}

.medical-container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e4e9;
}

.header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.medical-table {
  width: 100%;
  /*⭐ 合并表格边框，这样相邻的单元格边框会合并为一个边框 */
  border-collapse: collapse;
  border: 1px solid #000;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.medical-table th,
.medical-table td {
  border: 1px solid #000;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
  height: 28px !important;
}

.print-actions {
  margin-top: 20px;
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid #e0e4e9;
}

.print-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.print-btn:hover {
  background-color: #2980b9;
}

.loading {
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: #7f8c8d;
}

@media print {
  body {
    padding: 0;
    background: white;
  }

  .medical-container {
    padding: 5px;
    box-shadow: none;
  }

  .header,
  .print-actions {
    display: none;
  }
}
</style>
